<template>
  <div class="box">
    <!-- <div class="hands">我是头</div> -->

    <div class="main">
      <RouterView></RouterView>
    </div>
    <div class="foot">
      <RouterLink :to="item.to" v-for="item, index in arr" :key="item.to" @click="fn(index)">
        <svg class="icon" aria-hidden="true" :fill="index === num ? 'black' : 'gray'">
          <use :xlink:href="item.icon"></use>
        </svg>
      </RouterLink>
    </div>
  </div>
</template>

<script setup>
import '../assets/font-icon/iconfont'
import { ref } from 'vue';
import { useRoute } from 'vue-router'
const route = useRoute()

const num = ref(0)

if (route.path === '/Home') {
    num.value = 0
  } else if (route.path === '/Map') {
    num.value = 1
  }  else if (route.path === '/Shop') {
    num.value = 2
  }  else if (route.path === '/My') {
    num.value = 3
  } 





function fn(val) {
  // console.log(val);
  num.value = val
}

const arr = ref([
  {
    to: '/Home',
    icon: '#icon-shouye'
  },
  {
    to: '/Map',
    icon: '#icon-zhifeiji1'
  },
  {
    to: '/Shop',
    icon: '#icon-dianpu'
  },
  {
    to: '/My',
    icon: '#icon-wode'
  },
])





</script>



<style lang="less" scoped>
.box {
  height: 100%;
  display: flex;
  flex-direction: column;

  // overflow: auto;
}

.foot {
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  // justify-content: space-around;
  height: 50px;
  line-height: 50px;
  background-color: white;
  width: 100%;

  a {
    // color: black;
    flex: 1;
    text-align: center;
    color: red;

    svg {
      width: 50%;
      height: 50%;
      margin-top: 10px;
    }
  }
}

.main {
  // height: 1000px;
  // overflow: auto;
  overflow-y: scroll;
}

.main::-webkit-scrollbar {
  display: none;
}

.foot::-webkit-scrollbar {
  display: none;
}

.box::-webkit-scrollbar {
  display: none;
}
</style>
